<template>
	<view class="fixtitletopVue">
		<fixtitletopVue>
			<template #l>
				<view class="fix-l" @click="back">
					<view class="iconfont icon-jiantou"></view>
				</view>
			</template>
		</fixtitletopVue>
	</view>
	<scroll-view class="orderconbox" scroll-y v-if="orderinfo" @scrolltolower="scrollbottom">
		<view class="ordershow">
			<view class="ordershow-t">
				<view class="">{{shoperstuatus}}</view>
				<view class="iconfont icon-jiantouyou"></view>
			</view>
			<view class="ordershow-b">
				感谢你对ximo外卖的信任
			</view>
		</view>
		<view class="ordersho-more">
			<view class=""></view>
			<view class="agen" @click="aginprod">再来一单</view>
		</view>
		<view class="order-item">
			<view class="item-top">{{orderinfo.dname}}</view>
			<view class="item-bot">
				<image :src="'http://127.0.0.1:3006'+orderinfo.img" mode="aspectFill"></image>
				<view class="item-bot-l">
					<view class="t">
						<view class="tit">{{orderinfo.title}}</view>
						<view class="">单价￥{{orderinfo.price}}</view>
					</view>
					<view class="c">默认</view>
					<view class="c">x{{orderinfo.sum}}</view>
				</view>
			</view>
			<view class="price">
				<view class="">实付</view>
				<view class="pri">￥{{orderinfo.allprice}}</view>
			</view>
			<view class="address">
				<view class="l">配送地址</view>
				<view class="r">{{JSON.parse(orderinfo.address).address_address}}</view>
			</view>
			<view style="max-height: 0;overflow: hidden;transition: all 0.3s;" :class="{showss:ishow}">
				<view class="order-row">
					<view class="l">订单号码</view>
					<view class="r">{{orderinfo.orderid}}<view class="copediv" @click="copofun">复制</view>
					</view>
				</view>
				<view class="order-row">
					<view class="l">订单时间</view>
					<view class="r">{{orderinfo.createdAt}}</view>
				</view>
				<view class="order-row">
					<view class="l">支付方式</view>
					<view class="r">在线支付</view>
				</view>
				<view class="order-row">
					<view class="l">餐具数量</view>
					<view class="r">{{orderinfo.canju}}</view>
				</view>
			</view>
			<view class="more" v-if="!ishow" @click="openmore">
				查看更多 <view class="iconfont icon-jiantouyou"></view>
			</view>
			<view class="more" v-else @click="openmore">
				收起 <view class="iconfont icon-jiantouyou" style="transform: rotate(-90deg);"></view>
			</view>
		</view>
		<view class="tuijian">
			<titcaordVue tit="更多推荐"/>
			<view class=""  v-for="i in productdata" :key="i.id" @click="goxq">
				<productCardVue :data="i" />
			</view>
			<uni-load-more :status="cudata.length<4?'no-more':'loading'"></uni-load-more>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import productCardVue from '../../components/product-card/product-card.vue';
	import titcaordVue from '../../components/titcaord/titcaord.vue';
	import {
		getstatusheight,
		gettitleheight
	} from "@/util/getsysinfo.js"
	import {sgetproducts} from '@/api/index.js'
	import address from '../../store/address';
	const useaddress=address()
	const limit=ref(4)
	const offset=ref(1)
	const heights = getstatusheight() + gettitleheight() + 'px'
	const ishow = ref(false)
	const orderinfo=ref()
	const productdata=ref([])
	const cudata=ref([])
	onLoad(e=>{
		orderinfo.value=JSON.parse(e.data)
		console.log(JSON.parse(e.data))
		getprodudata()
	})
	const shoperstuatus=computed(()=>{
		if(	orderinfo.value.status!==1){
			switch(orderinfo.value.status){
				case 0 :return "等待用户支付~"
				case 2 :return "用户已取消~"
			}
		}
		switch(orderinfo.value.shoperstatus){
			case 0 :return "等待商家确认ing~"
			case 1 :return "商家正在备餐ing~"
			case 2 :return "订单已送达~"
			case 3 :return "订单商家已经取消~"
		}
	})
	const openmore = () => {
		ishow.value = !ishow.value
	}	
	const back = () => {
		uni.navigateBack()
	}
	const goxq=()=>{
		uni.navigateTo({
			url:`/pages/producet-xq/producet-xq?userid=${orderinfo.value.shoperid}&id=${orderinfo.value.productid}`
		})
	}
	const aginprod=()=>{
		uni.navigateTo({
			url:`/pages/producet-xq/producet-xq?userid=${orderinfo.value.shoperid}&id=${orderinfo.value.productid}`
		})
	}
    const getprodudata=async()=>{
		console.log(useaddress.address)
		 const rudata=await sgetproducts(useaddress.address,offset.value,limit.value)
		 if(rudata.code==200){
			  productdata.value=[...productdata.value,...rudata.data]
			  cudata.value=rudata.data
		 }
	}
    const scrollbottom=()=>{
		if(cudata.value.length<4)return
		offset.value++
		getprodudata()
	}
	const copofun=()=>{
		uni.setClipboardData({
			data:(orderinfo.value.orderid).toString(),
			success(e) {
				
			}
		})
	}
</script>

<style lang="scss" scoped>
	.orderconbox {
		height: calc(100vh - v-bind(heights));
		background-color: #eee;
        
		.tuijian {
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			padding: 0 20rpx;
           border-radius: 20rpx;
			
		}

		.order-item {
			width: 95%;
			margin: 30rpx auto 30rpx auto;
			height: fit-content;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 20rpx;

			.showss {
				max-height: 400rpx !important;
			}

			.order-row {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.l {
					color: #7b7b7b;
				}

				.r {
					// font-weight: 700;
					display: flex;
					align-items: center;
					gap: 15rpx;

					.copediv {
						padding: 5rpx 7rpx;
						border-radius: 15rpx;
						border: 1rpx solid #7b7b7b;
						font-size: 27rpx;
					}
				}
			}

			.more {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				gap: 10rpx;

				.iconfont {
					transform: rotate(90deg);
					font-size: 30rpx;
				}
			}

			.address {
				padding: 15rpx 0;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				border-top: 1rpx solid #eee;
				font-size: 32rpx;

				.l {
					color: #7b7b7b;
				}

				.r {
					width: 40%;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					// font-weight: 700;
				}
			}

			.price {
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 33rpx;
				color: #7b7b7b;

				.pri {
					font-weight: 700;
					color: #000;
				}
			}

			.item-bot {
				height: 150rpx;
				display: flex;
				gap: 20rpx;

				image {
					height: 150rpx;
					width: 150rpx;
					border-radius: 15rpx;
				}

				.item-bot-l {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.t {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 30rpx;

						.tit {
							width: 260rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.c {
						font-size: 28rpx;
						color: #7b7b7b;
					}

					.b {
						font-size: 28rpx;
						color: #7b7b7b;
					}
				}
			}

			.item-top {
				height: 80rpx;
				display: flex;
				align-items: center;
				color: #7b7b7b;
				font-size: 28rpx;
			}
		}

		.ordersho-more {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			font-size: 27rpx;
			color: #7b7b7b;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			border-radius: 0 0 50rpx 50rpx;

			.agen {
				padding: 17rpx 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 27rpx;
				color: #db3b23;
				background-color: #fce9ee;
				border-radius: 20rpx;
				font-weight: 700;
			}
		}

		.ordershow {
			height: 200rpx;
			width: 100%;
			background-color: #fff;
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20rpx;

			.ordershow-t {
				display: flex;
				font-size: 40rpx;
				font-weight: 700;
				align-items: center;
				gap: 10rpx;

				.iconfont {
					font-size: 35rpx;
				}
			}

			.ordershow-b {
				font-size: 25rpx;
			}
		}
	}

	.fixtitletopVue {
		background-color: #fff;
		padding: 0 20rpx;
		color: #000 !important;
		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 25rpx;
			}
		}
	}
</style>